<template>
	<el-container>
		<el-main ref="mainBody" class="nopadding" :style="'height:'+mainHeight+'px;'">
			<el-container>
				<el-aside class="nopadding" style="width: 145px;">
					<el-container>
						<el-header style="border: 0;margin-top: -14px;margin-bottom: -8px;">
							<el-input v-model="filterColumnName" clearable placeholder="筛选名称"></el-input>
						</el-header>
						<el-main>
							<el-collapse v-model="collapseActiveName" accordion>
								<template v-for="columnGroup in columnGroups">
									<el-collapse-item :name="columnGroup.levelCode">
										<template #title>
											<ex-label code="FamsColumn" :value="columnGroup.levelCode"/>
										</template>
										<template #default>
											<div class="dragList"
												 style="border: 1px solid white;padding: 2px 2px 2px 2px;">
												<draggable v-model="columnGroup.items" animation="300" item-key="id"
														   :group="{name:'columns'}" :sort="false"
														   @change="dragChange">
													<template #item="{ element }">
														<div class="item" v-if="element.visible">
															{{ element.name }}
														</div>
													</template>
												</draggable>
											</div>
										</template>
									</el-collapse-item>
								</template>
							</el-collapse>

						</el-main>
					</el-container>
				</el-aside>
				<el-main class="nopadding">
					<el-form :model="mainForm" :rules="mainForm.rules">
						<div class="mainDragList">
							<draggable v-model="cardForm.modules" animation="300"
									   :style="'height:'+ mainDragHeight+'px;background-color: #FFFFFF0D'"
									   item-key="id" :group="{name:'modules'}"
									   @change="modulesDragChange">
								<template #item="{ element }">
									<ex-drag-module :model="mainForm" :modules="cardForm.modules" :module="element"
													drag></ex-drag-module>
								</template>
							</draggable>
						</div>
					</el-form>
				</el-main>
				<el-aside style="width: 200px;border:1px solid #fff;">
					<el-tabs v-model="activeTab" type="border-card" stretch>
						<el-tab-pane label="模块" name="module">
							<template v-for="moduleGroup in dragSection.moduleGroups">
								<div style="width: 100%">
									<div style="float: left;width: 100%">
										{{ moduleGroup.name }}
									</div>
									<div class="dragList"
										 style="border: 1px solid white;padding: 2px 2px 2px 2px;">
										<draggable v-model="moduleGroup.items" animation="300" item-key="key"
												   :group="{name:'modules'}" :sort="false" @change="moduleListChange">
											<template #item="{ element }">
												<div class="item">{{ element.name }}</div>
											</template>
										</draggable>
									</div>
								</div>
							</template>
						</el-tab-pane>
						<el-tab-pane label="组件" name="widget">
							<template v-for="widgetGroup in dragSection.widgetGroups">
								<div style="width: 100%">
									<div style="float: left;width: 100%">
										{{ widgetGroup.name }}
									</div>
									<div class="dragList"
										 style="border: 1px solid white;padding: 2px 2px 2px 2px;">
										<draggable v-model="widgetGroup.items" animation="300" item-key="key"
												   :group="{name:'widgets'}" :sort="false" @change="widgetListChange">
											<template #item="{ element }">
												<div class="item">{{ element.name }}
												</div>
											</template>
										</draggable>
									</div>
								</div>
							</template>
						</el-tab-pane>
					</el-tabs>
				</el-aside>
			</el-container>
		</el-main>
	</el-container>
</template>

<script>
import draggable from 'vuedraggable'
import ExFormItem from "@/components/exFormItem/index.vue";
import ExLabel from "@/components/exLabel/index.vue";
import Select from "@/components/scWorkflow/select.vue";
import ExDragModule from "@/views/asset/card/module/index.vue";
import drag from "@/utils/drag";
import cache from "@/utils/cache";

export default {
	name: 'cardDesign',
	components: {
		ExDragModule,
		Select,
		ExLabel,
		ExFormItem,
		draggable
	},
	props: {
		cardForm: {},
	},
	data() {
		return {
			isAlready: false,
			activeTab: 'module',
			mainHeight: 100,
			mainDragHeight: 300,
			filterColumnName: '',
			newTabName: '',
			activeName: '',
			collapseActiveName: '',
			mainForm: {rules:[]},
			columns: [],
			columnGroups: [],
			windowBody: window,
			dragSection: {},
		}
	},
	async created() {
		await this.resetDragSection();
		this.resetMainHeight();
	},
	mounted() {
		if (this.cardForm) {
			if (!this.cardForm.modules) {
				this.cardForm.modules = [];
			}
		}
		if (this.columnGroups.length > 0) {
			this.collapseActiveName = this.columnGroups[0].levelCode;
		}
		this.isAlready = true;
		// window.addEventListener("resize", this.resetMainHeight);
	},
	beforeUnmount() {
		// window.removeEventListener("resize", this.resetMainHeight);
	},
	watch: {
		filterColumnName(val) {
      this.columnGroups.forEach(group=>{
        group.items.forEach(column => column.visible = column.name.includes(val));
      });
		},
	},
	methods: {
		resetDragSection: async function () {
			this.dragSection = this.$TOOL.objCopy(drag);
			this.columnGroups = await cache.data.loadColumnGroups();
		},
		resetMainHeight() {
			let mainHeight = window.innerHeight - 240;
			if (mainHeight <= 300) {
				mainHeight = 300;
			}
			this.mainHeight = mainHeight;
			this.mainDragHeight = mainHeight - 50;
		},

		//拖入字段栏时，重置字段的分组及位置
		dragChange: function (event) {
			if (event.removed) {
				this.resetDragSection();
			}
			if (event.added) {
				this.resetDragSection();
			}
		},

		moduleListChange: function (event) {
			if (event.removed) {
				this.resetDragSection();
			}
			if (event.added) {
				this.resetDragSection();
			}
		},

		//拖入字段栏时，重置字段的分组及位置
		widgetListChange: function (event) {
			if (event.removed) {
				this.resetDragSection();
			}
			if (event.added) {
				this.resetDragSection();
			}
		},

		//布局拖动变化时，更新该分组下所有字段的所属分组及排序
		modulesDragChange: function (event) {
			this.cardForm.modules.forEach((item, index) => {
				item.orderWeight = index;
			});
		},
	}
}
</script>

<style scoped>
.dragList {
	overflow: auto;
	height: 100%;
}

.group {
	float: left;
	color: #72b1f8;
	border: #A5D0FF;
	background: #A5D0FF4D;
	width: 100%;
	height: 25px;
	padding: 1px 0 0 2px;
	margin: 2px 0 2px 0;
}

.item {
	cursor: move;
	background: #fff;
	width: 95%;
	height: 35px;
	line-height: 35px;
	text-align: center;
	padding: 1px 1px 0 2px;
	margin: 2px 0 2px 0;
	border: 1px dashed #e6e6e6;
	overflow: hidden;
}

.mainDragList {
	overflow: auto;
	border: 1px dashed #e6e6e6;
}


.dragList .sortable-ghost {
	opacity: 0.5;
}

.colClass {
	height: 35px;
}

.innerDrawer {
	:deep .el-overlay {
		position: absolute;
	}
}

.mainBody {
	position: relative;
	overflow: hidden;
}


</style>
